<template>
<div class="user-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="用户主页" left-arrow @click-left="$router.back()">
        <template #right>
            <van-icon name="ellipsis" size="20" @click="showActionSheet = true" />
        </template>
    </van-nav-bar>

    <!-- 用户信息 -->
    <div class="user-header">
        <div class="user-info">
            <div class="user-avatar">
                <img :src="userInfo.avatar" alt="avatar" />
            </div>
            <div class="user-detail">
                <div class="user-name">{{ userInfo.nickname }}</div>
                <div class="user-id">小红书号：{{ userInfo.userId }}</div>
                <div class="user-desc">{{ userInfo.description }}</div>
            </div>
        </div>

        <!-- 用户统计 -->
        <div class="user-stats">
            <div class="stat-item" @click="goToFollows">
                <div class="stat-count">{{ userInfo.followCount }}</div>
                <div class="stat-label">关注</div>
            </div>
            <div class="stat-item" @click="goToFans">
                <div class="stat-count">{{ userInfo.fansCount }}</div>
                <div class="stat-label">粉丝</div>
            </div>
            <div class="stat-item" @click="goToLikes">
                <div class="stat-count">{{ userInfo.likeCount }}</div>
                <div class="stat-label">获赞</div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="user-actions">
            <div class="follow-btn" :class="{ 'followed': isFollowed }" @click="toggleFollow">
                {{ isFollowed ? '已关注' : '关注' }}
            </div>
            <div class="message-btn" @click="sendMessage">
                <van-icon name="chat-o" />
                <span>私信</span>
            </div>
        </div>
    </div>

    <!-- 内容标签页 -->
    <van-tabs v-model="activeTab" sticky swipeable animated>
        <van-tab title="笔记">
            <div class="content-grid" v-if="posts.length > 0">
                <div v-for="(item, index) in posts" :key="index" class="grid-item" @click="goToDetail(item.id)">
                    <div class="grid-item-image">
                        <img :src="item.coverImage" alt="cover" />
                        <div class="grid-item-multi" v-if="item.imageCount > 1">
                            <van-icon name="photo-o" />
                            <span>{{ item.imageCount }}</span>
                        </div>
                    </div>
                    <div class="grid-item-title">{{ item.title }}</div>
                    <div class="grid-item-stats">
                        <div class="grid-item-likes">
                            <van-icon name="like-o" />
                            <span>{{ item.likeCount }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="empty-content" v-else>
                <van-empty description="暂无笔记" />
            </div>
        </van-tab>
        <van-tab title="收藏">
            <div class="content-grid" v-if="collections.length > 0">
                <div v-for="(item, index) in collections" :key="index" class="grid-item" @click="goToDetail(item.id)">
                    <div class="grid-item-image">
                        <img :src="item.coverImage" alt="cover" />
                        <div class="grid-item-multi" v-if="item.imageCount > 1">
                            <van-icon name="photo-o" />
                            <span>{{ item.imageCount }}</span>
                        </div>
                    </div>
                    <div class="grid-item-title">{{ item.title }}</div>
                    <div class="grid-item-stats">
                        <div class="grid-item-likes">
                            <van-icon name="like-o" />
                            <span>{{ item.likeCount }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="empty-content" v-else>
                <van-empty description="暂无收藏" />
            </div>
        </van-tab>
        <van-tab title="赞过">
            <div class="content-grid" v-if="likes.length > 0">
                <div v-for="(item, index) in likes" :key="index" class="grid-item" @click="goToDetail(item.id)">
                    <div class="grid-item-image">
                        <img :src="item.coverImage" alt="cover" />
                        <div class="grid-item-multi" v-if="item.imageCount > 1">
                            <van-icon name="photo-o" />
                            <span>{{ item.imageCount }}</span>
                        </div>
                    </div>
                    <div class="grid-item-title">{{ item.title }}</div>
                    <div class="grid-item-stats">
                        <div class="grid-item-likes">
                            <van-icon name="like-o" />
                            <span>{{ item.likeCount }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="empty-content" v-else>
                <van-empty description="暂无点赞内容" />
            </div>
        </van-tab>
    </van-tabs>

    <!-- 操作菜单 -->
    <van-action-sheet v-model="showActionSheet" :actions="actionSheetActions" cancel-text="取消"
        @select="onActionSheetSelect" />
</div>
</template>

<script>
export default {
    name: 'UserPage',

    data() {
        return {
            userId: this.$route.params.id,
            activeTab: 0,
            isFollowed: false,
            showActionSheet: false,

            // 模拟数据
            userInfo: {
                userId: '101',
                nickname: '咖啡日记',
                avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                description: '分享城市里的咖啡馆和生活方式',
                followCount: 128,
                fansCount: 3426,
                likeCount: 12580
            },

            // 模拟笔记数据
            posts: [
                {
                    id: '1',
                    title: '探店 | 这家藏在胡同里的咖啡馆也太安静了吧',
                    coverImage: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                    imageCount: 3,
                    likeCount: 256
                },
                {
                    id: '2',
                    title: '周末咖啡馆推荐 | 5家适合看书发呆的小众店',
                    coverImage: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    imageCount: 5,
                    likeCount: 189
                },
                {
                    id: '3',
                    title: '手冲咖啡入门指南：器具选择和基础技巧',
                    coverImage: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    imageCount: 4,
                    likeCount: 324
                },
                {
                    id: '4',
                    title: '咖啡豆选购攻略：产地、烘焙度和风味解析',
                    coverImage: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                    imageCount: 2,
                    likeCount: 156
                }
            ],

            // 模拟收藏数据
            collections: [
                {
                    id: '5',
                    title: '北欧风咖啡馆装修灵感：极简主义与自然元素',
                    coverImage: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    imageCount: 6,
                    likeCount: 432
                },
                {
                    id: '6',
                    title: '咖啡与甜点的完美搭配：10种经典组合',
                    coverImage: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    imageCount: 3,
                    likeCount: 267
                }
            ],

            // 模拟点赞数据
            likes: [
                {
                    id: '7',
                    title: '咖啡师的一天：从烘焙到萃取的工作日常',
                    coverImage: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                    imageCount: 4,
                    likeCount: 198
                }
            ],

            // 操作菜单选项
            actionSheetActions: [
                { name: '分享' },
                { name: '举报' },
                { name: '不感兴趣' }
            ]
        }
    },

    created() {
        this.fetchUserInfo()
        this.fetchUserPosts()
    },

    methods: {
        // 获取用户信息
        fetchUserInfo() {
            // 模拟API请求
            setTimeout(() => {
                // 数据已经在data中初始化了
                console.log('用户信息加载完成')
            }, 500)
        },

        // 获取用户笔记
        fetchUserPosts() {
            // 模拟API请求
            setTimeout(() => {
                // 数据已经在data中初始化了
                console.log('用户笔记加载完成')
            }, 800)
        },

        // 关注/取消关注
        toggleFollow() {
            this.isFollowed = !this.isFollowed

            // 模拟API请求
            this.$toast(this.isFollowed ? '关注成功' : '已取消关注')
        },

        // 发送私信
        sendMessage() {
            this.$toast('私信功能开发中')
        },

        // 操作菜单选择
        onActionSheetSelect(action) {
            switch (action.name) {
                case '分享':
                    this.$toast('分享功能开发中')
                    break
                case '举报':
                    this.$toast('举报功能开发中')
                    break
                case '不感兴趣':
                    this.$toast('已减少此类内容推荐')
                    break
            }
        },

        // 跳转到关注列表
        goToFollows() {
            this.$toast('关注列表功能开发中')
        },

        // 跳转到粉丝列表
        goToFans() {
            this.$toast('粉丝列表功能开发中')
        },

        // 跳转到获赞列表
        goToLikes() {
            this.$toast('获赞列表功能开发中')
        },

        // 跳转到笔记详情
        goToDetail(id) {
            this.$router.push(`/detail/${id}`)
        }
    }
}
</script>

<style scoped>
.user-container {
    min-height: 100vh;
    background-color: var(--color-white);
}

.user-header {
    padding: 16px;
    border-bottom: 8px solid var(--color-background);
}

.user-info {
    display: flex;
    margin-bottom: 16px;
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-detail {
    flex: 1;
}

.user-name {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    margin-bottom: 4px;
}

.user-id {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.user-desc {
    font-size: var(--font-size-normal);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.user-stats {
    display: flex;
    margin-bottom: 16px;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-count {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    margin-bottom: 4px;
}

.stat-label {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

.user-actions {
    display: flex;
    gap: 12px;
}

.follow-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    border-radius: 18px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-normal);
}

.follow-btn.followed {
    background-color: var(--color-background);
    color: var(--color-text-secondary);
}

.message-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    border-radius: 18px;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-size: var(--font-size-normal);
}

.message-btn .van-icon {
    margin-right: 4px;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
}

.grid-item {
    border-radius: var(--border-radius-small);
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.grid-item-image {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.grid-item-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-item-multi {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: var(--color-white);
    font-size: var(--font-size-mini);
}

.grid-item-multi .van-icon {
    margin-right: 2px;
    font-size: var(--font-size-small);
}

.grid-item-title {
    padding: 8px;
    font-size: var(--font-size-small);
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.grid-item-stats {
    display: flex;
    padding: 0 8px 8px;
}

.grid-item-likes {
    display: flex;
    align-items: center;
    font-size: var(--font-size-mini);
    color: var(--color-text-secondary);
}

.grid-item-likes .van-icon {
    margin-right: 2px;
}

.empty-content {
    padding: 40px 0;
}

/* 修改Vant样式 */
:deep(.van-tabs__line) {
    background-color: var(--color-primary);
}

:deep(.van-tab--active) {
    color: var(--color-primary);
}
</style>